<template>
  <div class="gywm">
    <div class="jrBanner">
      <div class="title">
        可视化模板-apexcharts&emsp;
        <span class="showTime" style="width: 100px;height: 100px;font-size: 0.5rem;"></span>
      </div>
      
      <div class="two">
        <div class="left">
            <div id="chart" class="apexchart">
                <apexchart height="350" :options="chartOptions1" :series="series1"></apexchart>
            </div>
            <div id="chart" class="apexchart">
                <apexchart type="bar" height="350" :options="chartOptions3" :series="series3"></apexchart>
            </div>
            <div id="chart" class="apexchart">
                <apexchart type="line" height="350" :options="chartOptions5" :series="series5"></apexchart>
            </div>
            <div id="chart" class="apexchart">
                <apexchart type="donut" height="350" :options="chartOptions6" :series="series6"></apexchart>
            </div>
            <div id="chart" class="apexchart" v-for="(item,index) in leftdata" :key="index">
                <apexchart :type="item.type" height="350" :options="item.chartOptions" :series="item.series"></apexchart>
            </div>
        </div>
        <div class="right">
            <div id="chart" class="apexchart">
                <apexchart type="bar" height="350" :options="chartOptions2" :series="series2"></apexchart>
            </div>
            <div id="chart" class="apexchart">
                <apexchart type="bar" height="350" :options="chartOptions4" :series="series4"></apexchart>
            </div>
            <div id="chart" class="apexchart" v-for="(item,index) in rightdata" :key="index">
                <apexchart :type="item.type" height="350" :options="item.chartOptions" :series="item.series"></apexchart>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import "@/assets/js/rem.js";
// import * as echarts from 'echarts';
//格式:当前时间: 2020年3月17- 0时54分14秒
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
  clearTimeout(t); //清除定时器
  let dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours(); //获取时
  var m = dt.getMinutes(); //获取分
  var s = dt.getSeconds(); //获取秒
  document.querySelector(".showTime").innerHTML =
    "time:" + y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s;
  t = setTimeout(time, 1000); //设定定时器，循环运行
}

export default {
  name: "gywm",
  data() {
    return {
        series1: [
            {
                type: "line",
                name: "苏州",
                data: [-5, -1, 10, 15, 20, 23, 30, 31, 25, 16, 11, 5]
            },{
                type: "area",
                name: "赣州",
                data: [2, 8, 13, 18, 23, 29, 38, 35, 31, 25, 18, 6]
            },{
                type:'column',
                name: "聊城",
                data: [-12, -6, 3, 10, 13, 20, 28, 25, 21, 10, 6, -6]
            }
        ],
        chartOptions1: {
            title: {
                text: '天气折线图',
                align: 'left'
            },
            //标记相关属性
            markers: {
                size: [4, 8],//两组数据的标记点的大小。
                colors: ['#aabbcc','#bbaacc'],//标记点颜色
                strokeColors: ["#ccbbaa",'#ccaabb'],//标记点边框颜色
                shape: 'square',//标记点形状（圆和方）
                onClick: function(e) {
                    console.log(e,'该点被点击》》');
                }
            },
            //上面标记点点击需要加上，工具提示修改为以下代码才能捕获事件
            tooltip: {
                shared: false,
                intersect: true
            },
            chart: {
                height: 350,
                type: 'line',
                zoom: {
                enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',//数据点使用平滑曲线连接(curve: 'smooth',),或直线（curve: 'straight',），或阶梯线（curve: 'stepline',）
            },
            grid: {
                row: {
                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                opacity: 0.5
                },
            },
            xaxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            }
        },

        series2: [
            {
                name: '类目1',
                data: [3.3, 5.1, 5.0, 12.1, 5.0, 6.6, 5.2, 4.3, 2.4, 3.8, 3.5, 1.2]
            },{
                name: '类目2',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
            }
        ],
        chartOptions2: {
            chart: {
                height: 350,
                type: 'bar',
                stacked: false,//是否堆叠
            },
            plotOptions: {
                bar: {
                    borderRadius: 15,//圆角
                    dataLabels: {
                        position: 'top', // top, center, bottom 数据标签的位置
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                return val + "%";
                },
                offsetY: -20,
                style: {
                fontSize: '12px',
                colors: ["#304758"]
                }
            },
            
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                position: 'top',//坐标轴文字位置buttom、、
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                        colorFrom: '#D8E3F0',
                        colorTo: '#BED1E6',
                        stops: [0, 100],
                        opacityFrom: 0.4,
                        opacityTo: 0.5,
                    }
                }
                },
                tooltip: {
                    enabled: true,
                }
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val + "%";
                    }
                }
            
            },
            title: {
                text: '带有数据标签的列',
                floating: true,
                offsetY: 330,
                align: 'left',
                style: {
                    color: '#444'
                }
            }
        },

        series3: [{
            name: '类目1',
            data: [44, 55, 41, 67, 22, 43,33,37]
          }, {
            name: '类目2',
            data: [13, 23, 20, 8, 13, 27,25,16]
          }, {
            name: '类目3',
            data: [11, 17, 15, 15, 21, 14,23,16]
          }, {
            name: '类目4',
            data: [21, 7, 25, 13, 22, 8,16,9]
        }],
        chartOptions3: {
            chart: {
                type: 'bar',
                height: 350,
                stacked: true,//是否堆叠
                toolbar: {
                    show: true
                },
                zoom: {
                    enabled: true,//是否开启右上角放大缩小等功能
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false,
                    borderRadius: 10
                },
            },
            xaxis: {
                type: 'datetime',
                categories: [
                    '01/01/2011 GMT',
                    '01/03/2011 GMT', 
                    '01/04/2011 GMT',
                    '01/05/2011 GMT', 
                    '01/07/2011 GMT',
                    '01/09/2011 GMT',
                    '01/10/2011 GMT', 
                    '01/12/2011 GMT',
                ],
            },
            //图例是图表中用不同形状、颜色、文字等 标示不同数据列
            legend: {
                position: 'right',
                offsetY: 40
            },
            fill: {
                opacity: 0.8,//透明度
            }
        },

        series4: [{
            name: 'Cash Flow',
            data: [31.45, 15.42, 5.9, -5.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
              5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
              48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
            ]
        }],
        chartOptions4: {
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                colors: {
                    ranges: [
                        {
                            from: -100,
                            to: -40,
                            color: '#32a4fa'
                        }, {
                            from: -40,
                            to: 0,
                            color: '#32e7aa'
                        }, {
                            from: 0,
                            to: 10,
                            color: '#fdbe46'
                        }, {
                            from: 10,
                            to: 100,
                            color: '#fe697e'
                        }
                    ]
                },
                columnWidth: '80%',
                }
            },
            dataLabels: {
                enabled: false,
            },
            yaxis: {
                title: {
                    text: 'Growth',
                },
                labels: {
                    formatter: function (y) {
                        return y.toFixed(0) + "%";
                    }
                }
            },
            xaxis: {
                type: 'datetime',
                categories: [
                '2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
                '2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
                '2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
                '2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
                '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
                '2013-07-01', '2013-08-01', '2013-09-01'
                ],
                labels: {
                    rotate: -90
                }
            }
        },

        series5: [{
            name: 'Income',
            type: 'column',
            data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
          }, {
            name: 'Cashflow',
            type: 'column',
            data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
          }, {
            name: 'Revenue',
            type: 'line',
            data: [20, 29, 37, 36, 44, 45, 50, 58]
        }],
        chartOptions5: {
            chart: {
                height: 350,
                type: 'line',
                stacked: false
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: [1, 1, 4]
            },
            title: {
                text: '多Y轴柱形折线混合',
                align: 'left',
                offsetX: 110,
                offsetY: 10
            },
            xaxis: {
                categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
            },
            yaxis: [
                {
                    seriesName: 'Income',
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                        color: '#008FFB'
                    },
                    labels: {
                        style: {
                        colors: '#008FFB',
                        }
                    },
                    title: {
                        text: "Y轴1",
                        style: {
                        color: '#008FFB',
                        }
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                {
                    seriesName: 'Cashflow',
                    opposite: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                        color: '#00E396'
                    },
                    labels: {
                        style: {
                        colors: '#00E396',
                        }
                    },
                    title: {
                        text: "Y轴2",
                        style: {
                        color: '#00E396',
                        }
                    },
                },
                {
                    seriesName: 'Revenue',
                    opposite: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                        color: '#FEB019'
                    },
                    labels: {
                        style: {
                        colors: '#FEB019',
                        },
                    },
                    title: {
                        text: "Y轴3",
                        style: {
                        color: '#FEB019',
                        }
                    }
                },
            ],
            tooltip: {
                fixed: {
                enabled: true,
                position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
                offsetY: 30,
                offsetX: 60
                },
            },
            legend: {
                horizontalAlign: 'left',
                offsetX: 40,
                offsetY: 10
            }
        },

        series6: [44, 55, 41, 17, 15],
        chartOptions6: {
            chart: {
                type: 'donut',
            },
            responsive: [
                {
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            ]
        },

        rightdata: [
            {
                tyre: 'radar',
                series: [
                    {
                        name: 'Series 1',
                        data: [30, 90, 80, 50, 100, 70],
                    }, {
                        name: 'Series 2',
                        data: [120, 90, 60, 80, 70, 100],
                    }, {
                        name: 'Series 3',
                        data: [84, 66, 58, 33, 43, 10],
                    }],
                chartOptions: {
                    chart: {
                        height: 350,
                        type: 'radar',
                        dropShadow: {
                        enabled: true,
                        blur: 1,
                        left: 1,
                        top: 1
                        }
                    },
                    title: {
                        text: '雷达图-多系列(循环1)'
                    },
                    stroke: {
                        width: 2
                    },
                    fill: {
                        opacity: 0.1
                    },
                    markers: {
                        size: 0
                    },
                    xaxis: {
                        categories: ['2011', '2012', '2013', '2014', '2015', '2016']
                    }
                },
            },
            {
                tyre: 'polarArea',
                series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
                chartOptions: {
                    chart: {
                        type: 'polarArea',
                    },
                    title: {
                        text: '极低面积图(循环2)'
                    },
                    stroke: {
                        colors: ['#fff']
                    },
                    fill: {
                        opacity: 0.8
                    },
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                            width: 200
                            },
                            legend: {
                            position: 'bottom'
                            }
                        }
                    }
                    ]
                },
            },
            {
                tyre: 'radialBar',
                series: [44, 50, 67, 83],
                chartOptions: {
                    chart: {
                    height: 350,
                    type: 'radialBar',
                    },
                    plotOptions: {
                    radialBar: {
                        dataLabels: {
                        name: {
                            fontSize: '22px',
                        },
                        value: {
                            fontSize: '16px',
                        },
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function (w) {
                                return 250
                            }
                        }
                        }
                    }
                    },
                    labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
                },
            },
            {
                type: 'radialBar',
                series: [77],
                chartOptions: {
                    chart: {
                        height: 350,
                        type: 'radialBar',
                        offsetY: -10,//距离顶部距离
                    },
                    plotOptions: {
                    radialBar: {
                        startAngle: -135,
                        endAngle: 135,
                        dataLabels: {
                        name: {
                            fontSize: '16px',
                            color: undefined,
                            offsetY: 120
                        },
                        value: {
                            offsetY: 76,
                            fontSize: '22px',
                            color: undefined,
                            formatter: function (val) {
                                return val + "km/h";
                            }
                        }
                        }
                    }
                    },
                    fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        shadeIntensity: 0.15,
                        inverseColors: false,
                        opacityFrom: 1,
                        opacityTo: 1,
                        stops: [0, 50, 65, 91]
                    },
                    },
                    stroke: {
                        dashArray: 2,//每一格的宽度
                    },
                    labels: ['时速'],
                },
            }
        ],
        
        leftdata:[
            {
                type:'treemap',
                series: [
                    {
                    data: [
                        {
                        x: 'New Delhi',
                        y: 218
                        },
                        {
                        x: 'Kolkata',
                        y: 149
                        },
                        {
                        x: 'Mumbai',
                        y: 184
                        },
                        {
                        x: 'Ahmedabad',
                        y: 55
                        },
                        {
                        x: 'Bangaluru',
                        y: 84
                        },
                        {
                        x: 'Pune',
                        y: 31
                        },
                        {
                        x: 'Chennai',
                        y: 70
                        },
                        {
                        x: 'Jaipur',
                        y: 30
                        },
                        {
                        x: 'Surat',
                        y: 44
                        },
                        {
                        x: 'Hyderabad',
                        y: 68
                        },
                        {
                        x: 'Lucknow',
                        y: 28
                        },
                        {
                        x: 'Indore',
                        y: 19
                        },
                        {
                        x: 'Kanpur',
                        y: 29
                        }
                    ]
                    }
                ],
                chartOptions: {
                    legend: {
                    show: false
                    },
                    chart: {
                    height: 350,
                    type: 'treemap'
                    },
                    title: {
                    text: 'Distibuted Treemap (different color for each cell)',
                    align: 'center'
                    },
                    colors: [
                    '#3B93A5',
                    '#F7B844',
                    '#ADD8C7',
                    '#EC3C65',
                    '#CDD7B6',
                    '#C1F666',
                    '#D43F97',
                    '#1E5D8C',
                    '#421243',
                    '#7F94B0',
                    '#EF6537',
                    '#C0ADDB'
                    ],
                    plotOptions: {
                    treemap: {
                        distributed: true,
                        enableShades: false
                    }
                    }
                },
            }
        ],
    };
  },
  computed: {},
  created() {
        
  },
  mounted() {
    this.apexCharts()
  },
  methods: {
    apexCharts(){
        
     }
}
};
</script>

<style scoped>
.gywm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jrBanner {
  width: 24rem;
  background: #f6f6f6;
}
.title {
  height: 2rem;
  background: #aabbcc;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
}

.two {
  max-width: 24rem;
  background: #f9f9f9;
  display: flex;
}

.left {
  flex: 1;
  background: none;
  margin-left: 15px;
  border-right: 1px solid #aabbcc;
}
.apexchart{
    border: 1px solid #100c2a;
}

.right {
  flex: 1;
  background: none;
}


</style>
